<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>标签页 | 表单</title>
    <link rel="stylesheet" href="../../assets/dest/css/basic_reset.css">
    <link rel="stylesheet" href="../../assets/dest/css/basic_font.css">
	<link rel="stylesheet" href="../../assets/dest/css/nav_tabs.css">
	<link rel="stylesheet" href="../demo-lib/doc.css">
</head>
<body>
	<div class="header">
		<dl>
			<dt>项目：</dt>
			<dd>标签页</dd>
			<dt>描述：</dt>
			<dd>标签页，或称选项卡，用于分隔内容上有关联但属于不同类别的信息集合。</dd>
			<dt>资源：</dt>
			<dd>
				<code>basic_reset.css</code>
				<code>basic_font.css</code>
				<code>nav_tabs.css</code>
			</dd>
		</dl>
	</div>
	<div class="mainbox">
		<h4>默认：</h4>
		<div class="c-tabs">
			<ul class="c-tabs-title">
				<li class="is-active">
					<a href="#demo1_tab1">标签1</a>
				</li>
				<li>
					<a href="#demo1_tab2">标签2</a>
				</li>
				<li>
					<a href="#demo1_tab3">标签3</a>
				</li>
			</ul>
			<div class="c-tabs-cont">
				<div class="c-tab-pane is-active" id="demo1_tab1">我是标签1</div>
				<div class="c-tab-pane" id="demo1_tab2">这里是标签2的内容</div>
				<div class="c-tab-pane" id="demo1_tab3">现在看到的是标签3的内容</div>
			</div>
		</div>
		<hr>
		<h4>居中对齐：</h4>
		<div class="c-tabs">
			<ul class="c-tabs-title" style="text-align:center">
				<li class="is-active">
					<a href="#demo2_tab1">标签1</a>
				</li>
				<li>
					<a href="#demo2_tab2">标签2</a>
				</li>
				<li>
					<a href="#demo2_tab3">标签3</a>
				</li>
			</ul>
			<div class="c-tabs-cont">
				<div class="c-tab-pane is-active" id="demo2_tab1">我是标签1</div>
				<div class="c-tab-pane" id="demo2_tab2">这里是标签2的内容</div>
				<div class="c-tab-pane" id="demo2_tab3">现在看到的是标签3的内容</div>
			</div>
		</div>
		<hr>
		<h4>居中对齐：</h4>
		<div class="c-tabs">
			<ul class="c-tabs-title" style="text-align:right">
				<li class="is-active">
					<a href="#demo3_tab1">标签1</a>
				</li>
				<li>
					<a href="#demo3_tab2">标签2</a>
				</li>
				<li>
					<a href="#demo3_tab3">标签3</a>
				</li>
			</ul>
			<div class="c-tabs-cont">
				<div class="c-tab-pane is-active" id="demo3_tab1">我是标签1</div>
				<div class="c-tab-pane" id="demo3_tab2">这里是标签2的内容</div>
				<div class="c-tab-pane" id="demo3_tab3">现在看到的是标签3的内容</div>
			</div>
		</div>
		<hr>
		<h4>禁用：禁用的页签无法点击，也无法被键盘 tab 键索引到</h4>
		<div class="c-tabs">
			<ul class="c-tabs-title">
				<li class="is-active">
					<a href="#demo4_tab1">标签1</a>
				</li>
				<li>
					<a href="#demo4_tab2" disabled>标签2</a>
				</li>
				<li>
					<a href="#demo4_tab3">标签3</a>
				</li>
			</ul>
			<div class="c-tabs-cont">
				<div class="c-tab-pane is-active" id="demo4_tab1">我是标签1</div>
				<div class="c-tab-pane" id="demo4_tab2">这里是标签2的内容</div>
				<div class="c-tab-pane" id="demo4_tab3">现在看到的是标签3的内容</div>
			</div>
		</div>
	</div>
	<script src="../../dist/js/libs/jquery-1.11.3.min.js"></script>
    <script src="../../assets/dest/js/jquery.tabs.js"></script>
	<script>
		$('.c-tabs').tabs();
	</script>
</body>
</html>
